<template>
  <body>
  <div class="wrapper">
    <h2>Browser:</h2>
    <div class="logos">
      <img src="./logos/chrome.png" alt="chrome" title="Google Chrome" class="chrome">
      <img class="firefox" src="./logos/firefox.png" alt="firefox" title="Mozilla Firefox">
      <img class="edge" src="./logos/edge.png" alt="edge" title="Microsoft Edge">
      <img class="opera" src="./logos/opera.png" alt="opera" title="Opera">
      <img class="safari" src="./logos/safari.png" alt="safari" title="Apple Safari">
    </div>
  </div>
  </body>

</template>

<script>
import Clock from "../self/clock/Clock"
  export default {
    components:{
      Clock
    },
    name: 'Test4',
    mounted() {
      let userAgent = navigator.userAgent
      let browser;
      console.log(userAgent.match(/chrome/i))
      if (userAgent.match(/edg/i)) {
        browser = "edge"
      } else if (userAgent.match(/firefox|fxios/i)) {
        browser = "firefox"
      } else if (userAgent.match(/opr\//i)) {
        browser = "opera"
      }else if(userAgent.match(/chrome|chromium|crios/i)){
        browser="chrome"
      }else if(userAgent.match(/safari/i)){
        browser="safari"
      }else{
        alert("无法检测浏览器！")
      }
      const logo=document.querySelector(`.logos .${browser}`)
      if(logo){
        logo.style.opacity="1"
      }
    },
    data(){
      return {
      }
    },
    methods: {

    }
  }
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins",sans-serif;
}

body{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#252930 50%,#675afe 50%);
}

::selection{
  color: #fff;
  background: #675afe;
}

.wrapper{
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 30px 40px;
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.wrapper h2{
  color: #675afe;
  font-size: 46px;
}

.wrapper .logos{
  margin-left: 15px;
}

.logos img{
  opacity: 0.2;
  margin: 0 7px;
  transition: opacity 0.4s ease;
}

.logos img:last-child{
  margin-right: 0px;
}
</style>
